/**
 *       改变dom结构的方法
 *   1. createElement
 *   2. parentElement.appendChild
 *   3. parentElement.removeChild
 *   4.parentElement.insertBefore(newEle,refEle)
 *   5.parentElement.insertBefore(newEle,oldEle)
 *      展示dom结构的属性
 *   1. ele.children
 *   2. ele.parentElement
 *   3. ele.nextElementSibling // 下一个兄弟节点
 *
 *   * */

window.onload = function () {
    initTable();
    document.getElementById('btnAdd').onclick=btnAddClick;
    document.getElementById('btnSubmit').onclick = btnSubmitClick;
    document.getElementById('btnUpdate').onclick = btnUpdateClick;
    document.getElementById('btnRemove').onclick = btnRemoveClick;
}

function  btnRemoveClick(){

    /**
     * 找到被选中的dom节点（第二行）
     * 然后删除之
     * */
    var tbl=  document.getElementById('list');
    var selectedRow= tbl.children[1].children[1];
    selectedRow.parentElement.removeChild(selectedRow);

    // selectedRow.replaceChild() // 和insertBefore类似

}

function btnUpdateClick(){
    /**
     * 找到被选中的dom节点（第二行）
     *  改变第二行的年龄为67
     * */
    var tbl=  document.getElementById('list');
    var selectedTd= tbl.children[1].children[1].children[2];
    selectedTd.innerText = 67;

}

function btnSubmitClick(){

    /**
     *  获取员工的姓名和年龄
     *  然后把员工信息添加到dom节点上
     * */

    var empName = document.getElementById('empName').value;
    var age = document.getElementById('age').value;

  var tbl=  document.getElementById('list');
  var tableBody = tbl.children[1];

   var tRow = document.createElement('tr');
   var td1 =document.createElement('td');
   var td2 =document.createElement('td');
   td2.innerText = empName;
    var td3 =document.createElement('td');
    td3.innerText = age;

    tRow.appendChild(td1);
    tRow.appendChild(td2);
    tRow.appendChild(td3);
   tableBody.appendChild(tRow);
}

function btnAddClick(){

    var info=document.getElementById('info');
    info.classList.remove('fade');
    info.classList.add('show');
}

function initTable() {

    var container = document.getElementById('container');
    var list = document.getElementById('list');
    var toolbar = document.getElementById('toolbar');

    var toolbar2 = document.createElement('div');
    var btn1 = document.createElement('button');
    btn1.innerText = "按钮1";
    toolbar2.appendChild(btn1);

    // 父容器、新节点、引用节点
    /**
     *   父容器和引用节点之间是父子关系
     *   不在乎新节点在什么什么位置
     * */
    container.insertBefore(toolbar,list);


}